<template>
	<div class = "detailBanner">
		<div class = "imgWrap" @click = "bannerClick">
			<img :src="bannerImg" alt="">
			<div class = "info">
				<p>{{sightName}}</p>
				<p><span class = "iconfont">&#xe63a;</span>20</p>
			</div>
		</div>
		<fade-animation>
			<garllery v-show = "showGarllery" :gallaryImgs = "gallaryImgs" @close = "closeGarllery"></garllery>
		</fade-animation>
	</div>
</template>

<script>
	import garllery from 'common/Garllery/garllery.vue'
	import fadeAnimation from 'common/Fade/fadeAnimation'
	export default {
		name : 'banner',
		props : ["sightName","bannerImg","gallaryImgs"],
		data () {
			return {
				showGarllery : false
			}
		},
		methods : {
			bannerClick () {
				this.showGarllery = true;
			},
			closeGarllery () {
				this.showGarllery = false;
			}
		},
		components:{
			garllery,
			fadeAnimation
		}
	}
</script>

<style lang = 'less' scoped> 
	@import '~css/variable.less';
	.detailBanner {
		.imgWrap {
			height:0;
			overflow:hidden;
			padding-bottom: 55%;
			position: relative;
			img {
				width:100%;
				pointer-events: none;
			}
			.info {
				position: absolute;
				left:0rem;
				right:0rem;
				bottom:0rem;
				z-index:1;
				color:#fff;
				background-image: linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.8));
				p{
					&:first-of-type{
						padding:.1rem 0 .2rem .1rem;
						float:left;
					}
					&:last-of-type{
						padding:.1rem .2rem;
						margin-right:.1rem;
						background:rgba(0,0,0,.6);
						border-radius:.2rem;
						float:right;
						span {
							vertical-align: middle;
							line-height: .24rem;
							font-size:.22rem;
							margin-right:.06rem;
						}
					}
				}
			}
		}
	}
</style>